
.main{
	padding: 14px 30px;
	box-sizing: border-box;
	width: 100%;	
	.wrap{		
		.title{
			font-size: 20px;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 28px;
			img{
				margin: 0 10px 0 18px;
			}
			p{
				float: left;
				&:nth-child(2){
					float:right;
					margin-right:8px;
					width: 60px;
					height: 26px;
					border-radius: 4px 4px 4px 4px;
					border: 1px solid #3BC4FC;
					text-align: center;
					line-height: 22px;
					box-sizing: border-box;
					margin-top: 3px;
					a{
						font-size: 16px;
						font-family: 'SourceHanSansCN';
						font-weight: 400;
						color: #3BC4FC;
					}
				}		
			}
		}
		.leftDiv{
			width: 487px;
			// 3d环形图
			.box1{
				height: 263px;
				background: url(../img/page1/box1.png) no-repeat center;
				background-size: 100%;
				margin-bottom: 23px;
				padding: 60px 12px;
				box-sizing: border-box;
				.txt{
					float: left;
					width: 110px;
					background: url(../img/page1/bg4.png) no-repeat bottom;
					background-size: 100%;
					text-align: center;
					height: 90px;
					margin-top: 15px;
					p{
						font-size: 27px;
						font-family: 'DIN';
						color: #2AEDFF;
						&:nth-child(2){
							font-size: 16px;
							font-family: 'SourceHanSansCN';
							font-weight: 400;
							color: #FFFFFF;
						}
						&.col{
							color: #F6BB2E;
						}
					}
				}
				.chat{
					float: left;
					width: 240px;
					height: 180px;
					background: url(../img/page1/bg5.png) no-repeat bottom;
					background-size: 100%;
				}
			}
			// 视频
			.box2{
				height: 531px;
				background: url(../img/page1/box2.png) no-repeat center;
				background-size: 100%;
				padding: 45px 20px 40px;
				box-sizing: border-box;
				video{
					width: 100%;
					height: 100%;
				}
			}
		}
		.centerDiv{
			width: 848px;			
			position: relative;
			margin: 0 18px;
			// 设备信息
			.box1{
				height: 263px;
				background: url(../img/page1/box3.png) no-repeat center;
				background-size: 100%;
				margin-bottom: 20px;
				.content{
					padding: 20px 35px;
					.filter{
						font-size: 18px;
						font-family:'SourceHanSansCN';
						font-weight: 400;
						color: #FFFFFF;
						text-align: right;
						select{
							width: 274px;
							height: 32px;
							background-color: transparent;
							border: 1px solid #448FFF;
							font-size: 18px;
							font-family:'SourceHanSansCN';
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 5px;
							padding-left: 1em;
							box-sizing: border-box;
							option{
								background: #02152e;
							}
						}
					}
					ul{
						margin-top: 10px;
						li{
							width: 371px;
							height: 65px;
							float: left;
							background: url(../img/page1/bg3.png) no-repeat center;
							background-size: 100%;
							box-sizing: border-box;
							padding: 13px 22px;
							margin-bottom: 14px;
							&:nth-child(odd){
								margin-right: 33px;
							}
							span{
								font-size: 18px;
								font-family: 'SourceHanSansCN';
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 15px;
								line-height: 36px;
								&:last-child{
									font-size: 18px;					
									color: #5AD6FF;
									margin-left: 45px;
								}
							}
						}
					}
				}
			}
			// 塔吊
			.box2{	
				height: 534px;
				background: url(../img/page1/box4.png) no-repeat center;
				background-size: 100%;
				box-sizing: border-box;
				padding: 35px 0 0 55px;
				.content1{
					position: relative;
					width: 364px;
					height: 443px;
					.line{
						position: absolute;
						left: 240px;
						top: 85px;
						width: 20px;
						height: 317px;
						p{
							border: 2px solid #FEB332;
							border-bottom: none;
							width: 100%;
							height: 100%;
						}
						span{
							font-size: 18px;
							font-family: 'SourceHanSansCN';
							font-weight: 400;
							color: #FFFFFF;
							margin-left: -10px;
						}
						.t1{
							margin-left: -6px;
						}
					}
					.zhu{
						position: absolute;
						width: 58px;
						height: 310px;
						left: 68px;
						top: 125px;
						.t2{
							position: absolute;
							left: 0;
							bottom: 0%;
							p{
								margin-left: -80px;
								font-size: 18px;
								font-family: 'SourceHanSansCN';
								font-weight: 400;
								color: #FFFFFF;
							}
						}
					}					
				}
				.content2{
					text-align: center;
					margin-left: 70px;
					margin-top: 25px;
					.name{
						font-size: 20px;
						font-family: 'SourceHanSansCN';
						font-weight: 400;
						color: #FFFFFF;
					}
					.biao{
						width: 284px;
						height: 284px;
						background: url(../img/page1/bg7.png) no-repeat center;
						background-size: 100% 100%;
						margin-top: 18px;
						position: relative;
						.zhen{
							position: absolute;
							left: 50%;
							top: 0px;
							margin-left: -14px;
							transform: rotate(0deg);
							transform-origin: 14px 142px;
						}
					}
					.data{
						margin-top: 20px;
						font-size: 18px;
						font-family: 'SourceHanSansCN';
						font-weight: 400;
						color: #FFFFFF;
						p{
							width: 181px;
							height: 35px;
							background: url(../img/page1/bg8.png) no-repeat center;
							background-size: 100%;
							margin: 0 auto 17px;
							line-height: 35px;
						}
					}
				}
			}
		}
		.rightDiv{
			width: 488px;
			// 告警信息
			.box1{
				height: 505px;
				background: url(../img/page1/box5.png) no-repeat center;
				background-size: 100%;
				margin-bottom: 20px;
				.content{
					.top{
						width: 429px;
						height: 142px;
						background: url(../img/page1/bg1.png) no-repeat center;
						background-size: 100%;
						box-sizing: border-box;
						padding: 35px 20px;
						margin: 25px auto 0;
						p{
							font-size: 16px;
							font-family: 'SourceHanSansCN';
							font-weight: 400;
							color: #5AD6FF;
							&:nth-child(2){
								font-size: 24px;
								font-family: ;
								font-weight: 400;
								color: #FEB332;
								margin-top: 5px;
							}
							&.col{
								color: #FA6767;
							}
						}
						.img{
							float: left;
							text-align: center;
							width: 20%;
							margin-top: 10px;
						}
						.yujing{
							float: left;
							text-align: center;
							width: 40%;
						}
						.baojing{
							float: right;
							text-align: center;
							width: 40%;
						}
					}
					.list{
						margin-top: 18px;
						height: 290px;
						overflow: hidden;
					}
					ul{						
						li{
							width: 458px;
							height: 58px;
							padding: 0 15px;
							background: url(../img/page1/bg6.png) no-repeat center top;
							background-size: 100%;
							line-height: 40px;
							margin: 0 auto;
							box-sizing: border-box;
							img{
								margin-right: 8px;
								margin-top: 10px;
							}
							span{
								font-size: 16px;
								font-family: 'SourceHanSansCN';
								font-weight: 400;
								color: #FEFEFE;
								&:nth-of-type(2){
									width: 160px;
									font-size: 16px;
									font-family: 'DIN';
									font-weight: 500;
									color: #5AD6FF;
								}
							}
						}
					}
				}
			}
			// 警告趋势图
			.box2{
				height: 292px;
				background: url(../img/page1/box6.png) no-repeat center;
				background-size: 100%;				
			}
		}
		// 底部8个
		.bot{
			width: 100%;
			margin-top: 20px;
			ul{
				li{
					float: left;
					width: 211px;
					height: 119px;
					background: url(../img/page1/bg2.png) no-repeat center;
					background-size: 100%;
					margin-right: 25px;
					box-sizing: border-box;
					padding: 20px;
					&:last-child{
						margin-right: 0;
					}
					.top{
						img{
							float: left;
							width: 62px;
							height: 61px;
						}
						.txt{
							float: left;
							margin-left: 25px;
							p{
								font-size: 18px;
								font-family: 'SourceHanSansCN';
								font-weight: 400;
								color: #8CEFFE;
								&:last-child{
									font-size: 16px;
									font-family: 'DIN';
									font-weight: bold;
									color: #FFFFFF;
									line-height: 36px;
									span{
										font-size: 24px;
									}
								}
							}
						}
					}
					.bar{
						width: 143px;
						height: 6px;
						background: #00FFFF;
						border-radius: 3px 3px 3px 3px;
						margin: 10px 0 0 10px;
					}
				}
			}
		}
	}	
}
